<script setup lang="ts">
import { ref, onMounted, nextTick, reactive, watch, h } from 'vue';

import { Notification, TableRowSelection } from '@arco-design/web-vue';
import { useBooleanStore } from '@/store';
import {
  scanConfirmMaterialList,
  putToolPackage,
  sortStoreRoomIn,
  taskIn,
  saveRemark,
  queryCanReplaceWorkbin,
  insertHcx,
  queryWorkbinMaterial,
  replaceMatchInfo,
} from '@/api/sorting-matching';
import ColumnsList from './columns';

const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});
// 列表头部
const {
  columns,
  columnsTwo,
  materialOverColumns,
  materialColumns,
  ruleColumns,
} = ColumnsList();
// 扫码操作
const scanCode = ref<string>('');
const scanInput = ref<any>('');
const isConfirm = ref<boolean>(false);
const selectedKeys = ref<any>([]);
const rowSelection: TableRowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
// 适当的时间禁用扫码框
const disabled = ref<boolean>(false);
// 托盘编码
const toolCode = ref<string>('');
// 缓存箱编码
const workBinCode = ref<string>('');

// 检查是否重复扫缓存箱回库
const scanHcxOper = ref<boolean>(false);
// 检查是否重复扫工作包回库
const scanGzbOper = ref<boolean>(false);
// 重复扫码保存
const scanSave = ref<boolean>(true);
// 重复扫码物料
// const scanMaterialOper = ref<boolean>(false);

// 托盘物料
const scanMaterial = ref<any[]>([]);
// 缓存箱物料
const hcxinfos = ref<any[]>([]);
const showHcx = ref<boolean>(false);

// 控制弹框
const visible2 = ref<boolean>(false);

const drawerVisible = ref<boolean>(false);
// 物料替换
const replaceVisible = ref<boolean>(false);
// 输入的备注
const remark = ref<string>('');
// 手动更改托盘

const workBinToolRelId = ref<string>('');

const columnsAll: any[] = [
  {
    title: '条码',
    dataIndex: 'barcode',
    width: 200,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '托盘',
    dataIndex: 'toolCode',
    width: 160,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '缓存箱',
    dataIndex: 'workbinCode',
    width: 160,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: 'AO号',
    dataIndex: 'aoCode',
    width: 180,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '站位',
    dataIndex: 'station',
    width: 120,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '架次',
    dataIndex: 'planeNo',
    width: 120,
    ellipsis: true,
    tooltip: true,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '工作包号',
    dataIndex: 'packageCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '图号',
    dataIndex: 'itemCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },

  {
    title: '型号',
    dataIndex: 'mproductNumber',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 160,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '所属单位',
    dataIndex: 'invShop',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 140,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '质量编号',
    dataIndex: 'qualityCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '备注',
    dataIndex: 'receiveRemark',
    slotName: 'receiveRemark',
    width: 180,
  },
  {
    title: '待分拣数量：',
    dataIndex: 'matchQty',
    slotName: 'matchQty',
    width: 180,
  },
  {
    title: '是否带证',
    dataIndex: 'isPaper',
    slotName: 'isPaper',
    width: 180,
  },

  {
    title: '确认状态',
    dataIndex: 'status',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '工艺状态号',
    dataIndex: 'procceStusEcd',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '版本',
    dataIndex: 'version',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '油封期',
    dataIndex: 'sealDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '最长保管期',
    dataIndex: 'maxStorageDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '复试期',
    dataIndex: 'retestDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 180,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 180,
    slotName: 'action',
    fixed: 'right',
    align: 'center',
  },
];

// 托盘扫码
async function showToolMatchMaterialInfo() {
  if (toolCode.value === '') {
    if (scanCode.value.length !== 12) {
      Notification.warning({
        title: '提示',
        content: '条码格式有误',
        closable: true,
      });
      return;
    }
    toolCode.value = scanCode.value;
  } else {
    toolCode.value = scanCode.value;
    scanMaterial.value = [];
  }
}

// 缓存箱扫码
async function showHcxMatchMaterialInfo() {
  if (scanCode.value.length !== 12) {
    Notification.warning({
      title: '提示',
      content: '条码格式有误',
      closable: true,
    });
    return;
  }
  if (toolCode.value === '') {
    Notification.warning({
      title: '提示',
      content: '请先扫托盘',
      closable: true,
    });
    return;
  }
  workBinCode.value = scanCode.value;
  // 扫描一个新的缓存箱的时候清空上一次存储的数据
  scanMaterial.value = [];
  hcxinfos.value = [];
  // 开启遮罩层
  booleanStore.toggleBool(0);
  const data = await scanConfirmMaterialList({
    workbinCode: workBinCode.value,
    toolCode: toolCode.value,
  });

  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: '操作成功',
      closable: true,
    });
    hcxinfos.value = data.responseBody;
    hcxinfos.value = hcxinfos.value.map((item: any) => {
      item.status = '未确认'; // 更新 status
      return item; // 返回更新后的 item
    });
    showHcx.value = true;
  } else {
    Notification.error({
      title: '失败',
      content: '操作失败',
      closable: true,
    });
    workBinCode.value = '';
  }
  booleanStore.toggleBool(0);
}

// 分拣保存
async function savePackage() {
  if (!isConfirm.value) {
    Notification.warning({
      title: '提示',
      content: '请确认物料',
      closable: true,
    });

    return;
  }
  if (workBinCode.value === '' || toolCode.value === '') {
    Notification.warning({
      title: '提示',
      content: '请先扫缓存箱以及托盘',
      closable: true,
    });

    return;
  }
  // 判断托盘下是否存在物料
  if (scanMaterial.value.length < 1) {
    Notification.warning({
      title: '提示',
      content: '请先确认物料',
      closable: true,
    });
    return;
  }
  try {
    // 对数组里面的数据增加一个outQty字段
    scanMaterial.value = scanMaterial.value.map((item) => {
      item.outQty = item.matchQty;
      return item;
    });
    booleanStore.toggleBool(0);
    // 存在物料进行分拣
    const data = await putToolPackage({
      toolCode: toolCode.value,
      materialDTOs: scanMaterial.value,
    });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      hcxinfos.value = [];
      scanMaterial.value = [];
      scanCode.value = '';
      isConfirm.value = false;
      booleanStore.toggleBool3(7); // 更新表格数据
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    booleanStore.toggleBool(0);
    scanSave.value = true;
  } catch (error) {
    Notification.error({
      title: '失败',
      content: '系统异常，调用超时',
      closable: true,
    });
  } finally {
    nextTick(() => {
      scanInput.value.focus();
    });
  }
}

// 缓存箱回库
async function workbinBack() {
  // if (
  //   booleanStore.workBinList.length === 0 ||
  //   workBinCode.value !== booleanStore.workBinList[0].palletCode
  // ) {
  //   Notification.warning({
  //     title: '提示',
  //     content: '请先扫退第一个缓存箱！',
  //     closable: true,
  //   });
  //   return;
  // }

  if (workBinCode.value === '') {
    Notification.warning({
      title: '提示',
      content: '请先扫缓存箱条码！',
      closable: true,
    });
    return;
  }
  if (scanHcxOper.value) {
    Notification.warning({
      title: '提示',
      content: '请不要重复扫缓存箱回库',
      closable: true,
    });
    return;
  }
  try {
    // 缓存箱回库接口
    const data = await sortStoreRoomIn({ workbinCode: workBinCode.value });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      workBinCode.value = '';
      scanHcxOper.value = true;
      hcxinfos.value = [];
      booleanStore.toggleBool3(8); // 更新队列信息
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  } catch (error) {
    Notification.error({
      title: '失败',
      content: '系统异常，调用超时',
      closable: true,
    });
  }
}



// 工作包回库
async function toolBack() {
  // if (
  //   booleanStore.toolList.length === 0 ||
  //   toolCode.value !== booleanStore.toolList[0].palletCode
  // ) {
  //   Notification.warning({
  //     title: '提示',
  //     content: '请先扫退第一个托盘码！',
  //     closable: true,
  //   });
  //   return;
  // }

  if (toolCode.value === '') {
    Notification.warning({
      title: '提示',
      content: '请先扫工作包条码！',
      closable: true,
    });

    return;
  }
  if (scanGzbOper.value) {
    Notification.warning({
      title: '提示',
      content: '请不要重复扫托盘回库！',
      closable: true,
    });

    return;
  }
  // 当scanSave为false，证明没有输入9005保存
  if (!scanSave.value) {
    Notification.warning({
      title: '提示',
      content: '请先保存物料信息',
      closable: true,
    });

    return;
  }
  try {
    // 调用托盘回库接口
    const data = await taskIn({ palletCode: toolCode.value });
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      toolCode.value = '';
      scanGzbOper.value = true;
      scanMaterial.value = [];
      // 更新队列数据
      booleanStore.toggleBool3(8);
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  } catch (e) {
    Notification.error({
      title: '失败',
      content: '系统异常，调用超时',
      closable: true,
    });
  }
}

function sortHcxInfos() {
  hcxinfos.value.sort((a, b) => {
    // '未确认' 排前面，'已确认' 排后面
    if (a.status === '未确认') {
      return b.status === '未确认' ? 0 : -1; // 如果a是未确认，b也是未确认则相等，否则a在前
    }
    return b.status === '已确认' ? 0 : 1; // 如果b是已确认，则相等，否则b在前
  });

  // 强制 Vue 更新视图
  hcxinfos.value = [...hcxinfos.value];
}

// 物料确认
async function materailConfirm() {
  scanSave.value = false;
  if (scanCode.value === '') {
    Notification.error({
      title: '错误',
      content: '请输入对应的条码格式！',
      closable: true,
    });
    return;
  }
  // 条码的类型
  const barType = ref<string>('');
  // 去除格式的条码
  const scanBarcode = ref('');
  if (scanCode.value.includes('{')) {
    const scanCodeObj: any = JSON.parse(scanCode.value);
    if ('CPHGZ' in scanCodeObj) {
      scanBarcode.value = scanCodeObj.CPHGZ;
      barType.value = 'CP';
    } else {
      scanBarcode.value = scanCodeObj.CKCODE;
      barType.value = 'BJ';
    }
  } else {
    // 85的零件不是纯数字 GW-222222
    scanBarcode.value = scanCode.value;
    barType.value = 'LJ';
  }

  // 在将扫描的条码进行去除格式后判断，条码是否存在
  const barcodeExists = hcxinfos.value.some(
    (item) => item.barcode === scanBarcode.value
  );
  // 如果条码不存在，提示错误并终止操作
  if (!barcodeExists) {
    Notification.error({
      title: '错误',
      content: '扫描条码不存在',
      closable: true,
    });

    return;
  }

  if (barType.value !== 'BZJ') {
    hcxinfos.value.forEach((item) => {
      // 当扫描的条码与物料箱下物料条码一致
      if (scanBarcode.value === item.barcode) {
        // 判断托盘是否有物料
        if (scanMaterial.value.length > 0) {
          // 判断托盘里的物料是否与当前扫的物料一致
          const exists = scanMaterial.value.some(
            (item_) => item.msAoMatchInfoId === item_.msAoMatchInfoId
          );
          if (exists) {
            // 如果已经存在，提示并跳出循环
            Notification.warning({
              title: '提示',
              content: `${item.barcode}物料已存在于托盘中`, // 使用模板字符串
              closable: true,
            });
            return;
          }
        }
        // 如果物料不存在于托盘中，加入托盘数组
        scanMaterial.value.push(item);
        item.status = '已确认';
        Notification.success({
          title: '成功',
          content: `${item.barcode}物料确认成功`,
          closable: true,
        });
        isConfirm.value = true;
      }
    });
  } else {
    // 标准件将所有的默认确认
    hcxinfos.value.forEach((item) => {
      // 检查托盘是否已经有物料
      if (scanMaterial.value.length > 0) {
        // 使用 some 方法检查物料是否已存在
        const exists = scanMaterial.value.some(
          (item_) => item.msAoMatchInfoId === item_.msAoMatchInfoId
        );
        // 如果物料已存在，跳过当前项
        if (exists) {
          return; // 跳过当前项
        }
      }

      // 如果物料不存在于托盘中，加入托盘数组
      scanMaterial.value.push(item);
      // 将物料箱下的数据的状态更改为已确认
      item.status = '已确认';
      isConfirm.value = true;
      // 提示物料确认成功
      Notification.success({
        title: '成功',
        content: `${item.barcode}物料确认成功`, // 使用模板字符串
        closable: true,
      });
    });
  }
  sortHcxInfos(); // 调用排序函数
}

const setRowNameTWo = (record: any) => {
  // 如果 status 是 "已确认"，则返回绿色样式类名
  if (record.status === '已确认') {
    return 'row-green';
  }
  return '';
};

// 扫码操作
async function scanSubmit() {
  // 托盘扫码
  if (new RegExp('^212').test(scanCode.value) && scanCode.value.length >= 11) {
    disabled.value = true;
    showToolMatchMaterialInfo();
    disabled.value = false;
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else if (new RegExp('^112').test(scanCode.value)) {
    // 缓存箱扫码
    disabled.value = true;
    showHcxMatchMaterialInfo();
    disabled.value = false;
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else if (new RegExp('^312').test(scanCode.value)) {
    // 扫码大件缓存箱子
    disabled.value = true;
    showHcxMatchMaterialInfo();
    disabled.value = false;
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else if (scanCode.value === '9005') {
    // 保存
    disabled.value = true;
    savePackage();
    disabled.value = false;
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else if (scanCode.value === '9002') {
    disabled.value = true;
    workbinBack();
    disabled.value = false;
    // 箱子回库
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else if (scanCode.value === '9004') {
    // 托盘回库
    disabled.value = true;
    toolBack();
    disabled.value = false;
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  } else {
    // 物料确认
    disabled.value = true;
    materailConfirm();
    disabled.value = false;
    // 扫物料码
    scanCode.value = '';
    nextTick(() => {
      scanInput.value.focus();
    });
  }
}

// 修改备注
function openRemarkView(item: any) {
  remark.value = '';
  workBinToolRelId.value = '';
  remark.value = item.receiveRemark;
  workBinToolRelId.value = item.msAssginWorkbintoolRelId;
  visible2.value = true;
}

// 保存备注修改
async function okSaveRemark() {
  const data = await saveRemark({
    msAssginWorkbintoolRelId: workBinToolRelId.value,
    receiveRemark: remark.value,
  });

  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: '备注修改成功',
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: '备注修改失败',
      closable: true,
    });
  }
  scanCode.value = workBinCode.value;
  showHcxMatchMaterialInfo();
  scanCode.value = '';
  visible2.value = false;
}

// 补叫箱子抽屉
// 缓存箱列表
const workBinList = ref<any[]>([]);
// 勾选的缓存箱
const selected = ref<any[]>([]);
// 查看可以补叫的箱子列表
async function showDrawer(item: any) {
  const data = await queryCanReplaceWorkbin(item);
  workBinList.value = data.data;
  drawerVisible.value = true;
}
// 补叫箱子
async function addHcx() {
  // console.log(selected.value);
  if (selected.value.length !== 1) {
    Notification.error({
      title: '失败',
      content: '请勾选一条数据',
      closable: true,
    });
    return;
  }
  const addInfo = workBinList.value.filter((item: any) =>
    selected.value.includes(item.workbinCode)
  );
  const data = await insertHcx(addInfo[0]);
  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: '操作成功',
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: '操作失败',
      closable: true,
    });
  }
  selected.value = [];
  scanCode.value = workBinCode.value;
  showHcxMatchMaterialInfo();
  scanCode.value = '';
  drawerVisible.value = false;
}

// 查看托盘下的物料信息，主要的列表在pallet-drawer文件
function searchMaterialInfo() {
  if (toolCode.value === '') {
    Notification.error({
      title: '失败',
      content: '请扫描托盘编号',
      closable: true,
    });
    return;
  }
  if (workBinCode.value === '') {
    Notification.error({
      title: '失败',
      content: '请扫描缓存箱编号',
      closable: true,
    });
    return;
  }
  booleanStore.setInfo(
    toolCode.value,
    hcxinfos.value[0]?.msTaskPackageId || ''
  );
}

// 查看缓存箱
async function lookupHcx() {
  booleanStore.toggleBool2(6);
}

// 左右俩测的table数据
const leftData = ref<any[]>([]);
const rightData = ref<any[]>([]);
async function openReplaceView(item: any) {
  replaceVisible.value = true;
  leftData.value = [];
  leftData.value.push(item);
  const data = await queryWorkbinMaterial(item);
  // console.log(data);
  rightData.value = data.data;
}

// 调用替换接口
async function saveReplaceData() {
  const data = await replaceMatchInfo({
    sourceMatch: leftData.value[0],
    replaceMatchList: rightData.value,
  });

  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: '操作成功',
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: '操作失败',
      closable: true,
    });
  }

  scanCode.value = workBinCode.value;
  showHcxMatchMaterialInfo();
  scanCode.value = '';
  replaceVisible.value = false;
}

// 初始进入页面
onMounted(() => {
  nextTick(() => {
    scanInput.value.focus();
  });
});
</script>

<template>
  <a-card title="缓存箱物料信息" :header-style="hStyle" :bordered="false">
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <div>
          <a-input
            ref="scanInput"
            v-model="scanCode"
            :disabled="disabled"
            placeholder="请输入缓存箱/托盘码/条码"
            size="large"
            @keyup.enter="scanSubmit()"
          />
        </div>
      </a-col>
      <a-col :span="18">
        <div class="div-container">
          <img v-if="isConfirm" height="35" src="@/assets/images/确认.png" />
          <img v-else height="35" src="@/assets/images/待确认.png" />
          <a-button
            type="primary"
            style="margin-left: 10px"
            size="large"
            @click="savePackage"
            >确认提交</a-button
          >
          <a-button
            type="primary"
            style="margin-left: 10px"
            size="large"
            @click="lookupHcx"
            >查看缓存箱托盘</a-button
          >
          <!-- <a-button
            type="primary"
            style="margin-left: 10px"
            size="large"
            @click="searchMaterialInfo"
            >查看托盘</a-button
          > -->
          <a-popconfirm
            content="确定要缓存箱回库?"
            ok-text="确定"
            cancel-text="取消"
            @ok="workbinBack"
          >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >缓存箱回库</a-button
            >
          </a-popconfirm>

          <a-popconfirm
            content="确定要托盘回库?"
            ok-text="确定"
            cancel-text="取消"
            @ok="toolBack"
          >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >托盘回库</a-button
            >
          </a-popconfirm>
          <div class="flex-box" style="margin-left: 20px">
            <span>托盘编码：</span>
            <span class="font-size clickable" @click="searchMaterialInfo()">{{
              toolCode
            }}</span>
          </div>
        </div>
      </a-col>
    </a-row>
    <!-- <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="12">
        <div class="flex-column">
          <div class="flex-box">
            <span>缓存箱编码：</span>
            <span class="font-size">{{ workBinCode }}</span>
          </div>
          <div
            v-for="(item, index) in hcxinfos"
            v-show="showHcx"
            :key="index"
            class="margin-top"
          > -->
    <a-table
      :stripe="true"
      row-key="mesCheckQualiticationId"
      class="top-table"
      :pagination="false"
      :columns="columnsAll"
      :data="hcxinfos"
      column-resizable
      :scroll="{ y: 400 }"
      style="height: 200px"
      :row-class="setRowNameTWo"
    >
      <template #receiveRemark="{ record }">
        <a-input v-model="record.receiveRemark" />
      </template>
      <template #matchQty="{ record }">
        <a-input-number v-model="record.matchQty" :max="10000" :min="0" />
      </template>
      <template #isPaper="{ record }">
        <a-select v-model="record.isPaper">
          <a-option value="Y">带证</a-option>
          <a-option value="N">不带证</a-option>
        </a-select>
      </template>
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="showDrawer(record)"
          >补叫箱子</a-button
        >

        <a-button
          type="text"
          class="font-color"
          @click="openReplaceView(record)"
          >更换物料</a-button
        >
      </template>
    </a-table>
    <!-- <a-list size="small" :split="false">
                <a-list-item style="padding: 0 8px"
                  >条码：<span class="fontSize">{{
                    item.barcode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >工作包编号：<span class="fontSize">{{
                    item.packageCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px">
                  AO编号：<span class="fontSize">{{
                    item.aoCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >所在托盘：<span class="fontSize">{{
                    item.toolCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >图号：<span class="fontSize">{{
                    item.itemCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >型号：<span class="fontSize">{{
                    item.mProductNumber
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >质量编号：<span class="fontSize">{{
                    item.qualityCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >所属单位：<span class="fontSize">{{
                    item.invShop
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 8px 8px"
                  >是否有备注：<span
                    :class="{
                      red: item.receiveRemark === '',
                      green: item.receiveRemark !== '',
                    }"
                    @click="openRemarkView(item)"
                    >{{
                      item.receiveRemark === '' ||
                      item.receiveRemark === null ||
                      item.receiveRemark === undefined
                        ? '未备注'
                        : '有备注'
                    }}</span
                  ></a-list-item
                >
                <a-list-item style="padding: 8px 8px"
                  >待分拣数量：
                  <a-input v-model="item.matchQty" style="width: 50%"> </a-input
                ></a-list-item>
                <a-list-item style="white-space: nowrap; padding: 8px 8px"
                  >是否带证：
                  <a-select v-model="item.isPaper" style="width: 50%">
                    <a-option value="Y">带证</a-option>
                    <a-option value="N">不带证</a-option>
                  </a-select>
                </a-list-item>
                <a-list-item style="padding: 0 8px"
                  >确认状态：
                  <span style="font-size: 18px; font-weight: 600">{{
                    item.status
                  }}</span>
                </a-list-item>
                <a-list-item style="padding: 0 8px">
                  <a-button
                    type="primary"
                    size="large"
                    style="border-radius: 4px"
                    @click="showDrawer(item)"
                    >补叫箱子</a-button
                  >
                  <a-button
                    type="primary"
                    size="large"
                    style="margin-left: 10px; border-radius: 4px"
                    @click="openReplaceView(item)"
                    >更换物料</a-button
                  >
                </a-list-item>
              </a-list> -->
  </a-card>
  <!-- </div>
        </div>
      </a-col> -->
  <!-- 工作包 -->
  <!-- <a-col :span="12">
        <div class="flex-column">
          <div class="flex-box">
            <span>托盘编码：</span>
            <span class="font-size clickable" @click="searchMaterialInfo()">{{
              toolCode
            }}</span>
          </div>
          <div
            v-for="(item, index) in scanMaterial"
            v-show="showHcx"
            :key="index"
            class="margin-top"
          >
            <a-card :style="{ width: '360px' }" title="工作包物料信息">
              <a-list size="small" :split="false" :grid-props="{ padding: 0 }">
                <a-list-item style="padding: 0 8px"
                  >条码：<span class="fontSize">{{
                    item.barcode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px">
                  AO编号：<span class="fontSize">{{
                    item.aoCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >图号：<span class="fontSize">{{
                    item.itemCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >质量编号：<span class="fontSize">{{
                    item.qualityCode
                  }}</span></a-list-item
                >
                <a-list-item style="padding: 0 8px"
                  >数量：<span class="fontSize">{{
                    item.itemQty
                  }}</span></a-list-item
                >
              </a-list>
            </a-card>
          </div>
        </div>
      </a-col>
   </a-row> -->
  <!-- 修改备注 -->
  <a-modal
    v-model:visible="visible2"
    @cancel="() => (visible2 = !visible2)"
    @ok="okSaveRemark"
  >
    <template #title> 修改备注 </template>
    <span>请输入备注:</span>
    <a-textarea v-model="remark" size="large" />
  </a-modal>

  <!-- 补叫箱子抽屉 -->
  <a-drawer
    :width="640"
    :visible="drawerVisible"
    :footer="false"
    unmount-on-close
    @cancel="drawerVisible = !drawerVisible"
  >
    <template #title> 补叫缓存箱 </template>
    <div>
      <a-button
        type="primary"
        size="large"
        style="border-radius: 4px"
        @click="addHcx"
        >补叫箱子</a-button
      >
      <a-table
        v-model:selectedKeys="selected"
        :stripe="true"
        class="top-table"
        :pagination="false"
        :row-selection="rowSelection"
        row-key="workbinCode"
        :columns="columnsTwo"
        :data="workBinList"
        :scroll="{ y: 400 }"
        style="height: 250px"
      >
      </a-table>
    </div>
  </a-drawer>

  <!-- 物料替换 -->
  <a-drawer
    :width="840"
    :visible="replaceVisible"
    :footer="false"
    unmount-on-close
    @cancel="replaceVisible = !replaceVisible"
  >
    <template #title> 物料替换 </template>
    <div>
      <a-button
        type="primary"
        size="large"
        style="border-radius: 4px"
        @click="saveReplaceData"
        >替换</a-button
      >
      <a-row :gutter="8">
        <a-col :span="8">
          <a-table
            :stripe="true"
            class="top-table"
            :pagination="false"
            :columns="materialOverColumns"
            :data="leftData"
            :scroll="{ y: 400 }"
            style="height: 250px"
          >
          </a-table>
        </a-col>
        <a-col :span="16">
          <a-table
            :stripe="true"
            class="top-table"
            :pagination="false"
            :columns="materialColumns"
            :data="rightData"
            :scroll="{ y: 400 }"
            style="height: 250px"
          >
            <template #replaceQty="{ rowIndex }">
              <a-input v-model="rightData[rowIndex].replaceQty" />
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<style scoped>
.margin-top {
  margin-top: 10px;
}
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.div-tips {
  align-items: center;
  text-align: center;
  color: #999;
}
.flex-box {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.top-table {
  white-space: nowrap;
  margin-top: 10px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.font-size {
  font-size: 18px;
  font-weight: bold;
}
.red {
  color: red; /* 字体颜色为红色 */
  font-weight: 600;
  background-color: transparent; /* 确保背景颜色为透明 */
  border: 1px solid red;
  border-radius: 8px;
  padding: 3px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.green {
  color: green; /* 字体颜色为红色 */
  font-weight: 600;
  background-color: transparent; /* 确保背景颜色为透明 */
  border: 1px solid green;
  border-radius: 8px;
  padding: 3px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.listItem {
  margin: 0;
  padding: 0;
}
.fontSize {
  font-weight: 600;
  font-size: 18px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.margin-top {
  margin-top: 10px;
}
.clickable {
  cursor: pointer; /* 鼠标悬停时变成手指 */
  transition: color 0.3s; /* 平滑过渡效果 */
}

.clickable:hover {
  color: blue; /* 鼠标悬停时改变字体颜色 */
}
.div-container {
  display: flex;
  justify-content: start;
  align-items: center;
}
:deep(.row-green > .arco-table-td) {
  background-color: #e6ffe6 !important; /* 浅绿色背景 */
}
</style>
